<template>
  <div class="realTime">
    <div class="leftChart">
      <div class="left-chart-item">
        <PIEBarChart :options="option2" className="chart1"></PIEBarChart>
        <PIEBarChart :options="option3" className="chart2"></PIEBarChart>
        <PIEBarChart :options="option1" className="chart3"></PIEBarChart>
        <!-- <PIEBarChart :options="option2"></PIEBarChart>
      <PIEBarChart :options="option3"></PIEBarChart> -->
      </div>
      <div class="left-chart-item">
        <PIEBarChart :options="option2" className="chart4"></PIEBarChart>
        <PIEBarChart :options="option3" className="chart5"></PIEBarChart>
        <PIEBarChart :options="option1" className="chart6"></PIEBarChart>
      </div>
      <div class="left-chart-item">
        <PIEBarChart :options="option2" className="chart7"></PIEBarChart>
        <PIEBarChart :options="option1" className="chart8"></PIEBarChart>
        <PIEBarChart :options="option3" className="chart9"></PIEBarChart>
      </div>
    </div>

    <div class="rightChart">
      <PIERightEchart :options="optionList4" class="card"></PIERightEchart>
    </div>
  </div>
</template>

<script lang="ts" setup>
let option1 = {
  title: {
    text: "今日/本周/本月转换",
    textStyle: {
      //文字颜色
      color: "#fff",
      //字体风格,'normal','italic','oblique'
      fontStyle: "normal",
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: "bold",
      //字体系列
      fontFamily: "sans-serif",
      //字体大小
      fontSize: 15,
    },
    top: 15,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "15%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    axisLine: { show: true },
    boundaryGap: [0, 0.01],
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "white", //更改坐标轴文字颜色
        fontSize: 10, //更改坐标轴文字大小
      },
    },
    name: "TB", //坐标轴单位
    // nameLocation: "start", //设置name位置  start或者end
    nameTextStyle: {
      color: "#fff",
      fontSize: 10,
      padding: 10,
    },
  },
  yAxis: {
    type: "category",
    data: ["台站元数据", "能谱", "水声", "次声", "地震"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "white", //更改坐标轴文字颜色
        fontSize: 10, //更改坐标轴文字大小
      },
    },
  },
  series: [
    {
      // name: "2011",
      type: "bar",
      barWidth: 10, //设置柱状图大小
      itemStyle: {
        normal: {
          color: "#22FFCC",
        },
      },
      data: [10, 20, 30, 25, 20],
    },
  ],
};
let option2 = {
  title: {
    text: "今日/本周/本月转换2",
    textStyle: {
      //文字颜色
      color: "#fff",
      //字体风格,'normal','italic','oblique'
      fontStyle: "normal",
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: "bold",
      //字体系列
      fontFamily: "sans-serif",
      //字体大小
      fontSize: 15,
    },
    top: 15,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "15%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    axisLine: { show: true },
    boundaryGap: [0, 0.01],
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "white", //更改坐标轴文字颜色
        fontSize: 10, //更改坐标轴文字大小
      },
    },
    name: "TB", //坐标轴单位
    // nameLocation: "start", //设置name位置  start或者end
    nameTextStyle: {
      color: "#fff",
      fontSize: 10,
      padding: 10,
    },
  },
  yAxis: {
    type: "category",
    data: ["台站元数据", "能谱", "水声", "次声", "地震"],
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "white", //更改坐标轴文字颜色
        fontSize: 10, //更改坐标轴文字大小
      },
    },
  },
  series: [
    {
      // name: "2011",
      type: "bar",
      barWidth: 10, //设置柱状图大小
      itemStyle: {
        normal: {
          color: "#1191FF",
        },
      },
      data: [10, 20, 30, 25, 20],
    },
  ],
};
let option3 = {
  title: {
    text: "今日/本周/本月转换3",
    textStyle: {
      //文字颜色
      color: "#fff",
      //字体风格,'normal','italic','oblique'
      fontStyle: "normal",
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: "bold",
      //字体系列
      fontFamily: "sans-serif",
      //字体大小
      fontSize: 15,
    },
    top: 15,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "15%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    axisLine: { show: true },
    // boundaryGap: [0, 0.01],
    splitLine: {
      show: false,
    },
    // max: 100,
    // max: "dataMax",
    axisLabel: {
      show: true,
      textStyle: {
        color: "white", //更改坐标轴文字颜色
        fontSize: 10, //更改坐标轴文字大小
      },
    },
    name: "TB", //坐标轴单位
    // nameLocation: "start", //设置name位置  start或者end
    nameTextStyle: {
      color: "#fff",
      fontSize: 10,
      padding: 10,
    },
  },
  yAxis: {
    type: "category",
    data: ["台站元数据3", "能谱", "水声", "次声", "地震"],
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "white", //更改坐标轴文字颜色
        fontSize: 10, //更改坐标轴文字大小
      },
    },
  },
  series: [
    {
      // name: "2011",
      type: "bar",
      barWidth: 10, //设置柱状图大小
      itemStyle: {
        normal: {
          color: "#FFB84E",
        },
      },
      data: [10, 20, 30, 25, 20],
    },
  ],
};
let optionList = [option1, option2, option1];
let optionList2 = [option2, option2, option2];
let optionList3 = [option3, option3, option3];
let optionList4 = [option1, option3, option3, option2];
</script>

<style lang="less" scoped>
.realTime {
  display: flex;
  margin: @global-margin;
  box-sizing: border-box;

  .leftChart {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: @global-margin;

    >div {
      box-sizing: border-box;
      // background-color: rgba(10, 37, 88, 0.8);
      // margin: 0 @global-margin;
      background-image: radial-gradient(#010814ef, #144f79a1);
      border: 2px solid #1f4b6e;
      border-radius: 10px;
    }

    .left-chart-item {
      display: flex;
      margin-bottom: 10px;
    }
  }

  .rightChart {
    box-sizing: border-box;
    margin-right: @global-margin;

    // background-color: rgba(10, 37, 88, 0.8);
    background-image: radial-gradient(#010814ef, #144f79a1);
    border: 2px solid #1f4b6e;
    border-radius: 10px;
  }
}
</style>